﻿@using Tau.ViewModels
@model AddEditProduct

<script src="@Url.Content("~/Scripts/tiny_mce/jquery.tinymce.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery.validate.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery.validate.unobtrusive.min.js")" type="text/javascript"></script>
<script type="text/javascript" src="@Url.Content("~/Scripts/multiselect/jquery.localisation-min.js")"></script>
<script type="text/javascript" src="@Url.Content("~/Scripts/multiselect/jquery.scrollTo-min.js")"></script>
<script type="text/javascript" src="@Url.Content("~/Scripts/multiselect/ui.multiselect.js")"></script>
<script type="text/javascript" src="@Url.Content("~/Scripts/multiselect/ui-multiselect-en.js")"></script>

<link href="@Url.Content("~/Content/multiselect/ui.multiselect.css")" rel="stylesheet" type="text/css" />

<link href="@Url.Content("~/Content/prettyPhoto/css/prettyPhoto.css")" rel="stylesheet" type="text/css" />

<script type="text/javascript" src="@Url.Content("~/Content/prettyPhoto/js/jquery.prettyPhoto.js")"></script>

@using (Html.BeginForm("AddEditProduct", "ProductAdmin", FormMethod.Post, new { id = "addEditProductForm" }))
{
    @Html.ValidationSummary(true)
    <fieldset>
        <legend>@( Model.Mode == DisplayMode.Edit ? "Edit Product" : "Add New Product" )</legend>

        @Html.HiddenFor(model => model.EditingProduct.ProductId)

        <table>
            <tr>
                <td>
                    @Html.LabelFor(model => model.EditingProduct.ProductName)
                </td>
                <td>
                    @Html.EditorFor(model => model.EditingProduct.ProductName)
                    @Html.ValidationMessageFor(model => model.EditingProduct.ProductName)
                </td>
            </tr>
            <tr>
                <td>
                    @Html.LabelFor(model => model.EditingProduct.ProductNumber)
                </td>
                <td>
                    @Html.EditorFor(model => model.EditingProduct.ProductNumber)
                    @Html.ValidationMessageFor(model => model.EditingProduct.ProductNumber)
                </td>
            </tr>
            <tr>
                <td>
                     @Html.LabelFor(model => model.EditingProduct.Price)
                </td>
                <td>
                    $@Html.EditorFor(model => model.EditingProduct.Price)
                     @Html.ValidationMessageFor(model => model.EditingProduct.Price)
                </td>
            </tr>
            <tr>
                <td>
                     @Html.LabelFor(model => model.EditingProduct.WholesalePrice)
                </td>
                <td>
                    $@Html.EditorFor(model => model.EditingProduct.WholesalePrice)
                     @Html.ValidationMessageFor(model => model.EditingProduct.WholesalePrice)
                </td>
            </tr>
            <tr>
                <td>
                     @Html.LabelFor(model => model.EditingProduct.ShippingCost)
                </td>
                <td>
                    $@Html.EditorFor(model => model.EditingProduct.ShippingCost)
                     @Html.ValidationMessageFor(model => model.EditingProduct.ShippingCost)
                </td>
            </tr>
            <tr>
                <td>
                     @Html.LabelFor(model => model.EditingProduct.Shipping2)
                </td>
                <td>
                    $@Html.EditorFor(model => model.EditingProduct.Shipping2)
                     @Html.ValidationMessageFor(model => model.EditingProduct.Shipping2)
                </td>
            </tr>
            <tr>
                <td>
                     @Html.LabelFor(model => model.EditingProduct.ShortDescription)
                </td>
                <td>
                    @Html.EditorFor(model => model.EditingProduct.ShortDescription)
                    @Html.ValidationMessageFor(model => model.EditingProduct.ShortDescription)
                </td>
            </tr>
            <tr>
                <td valign="top">
                     @Html.LabelFor(model => model.EditingProduct.Description)
                </td>
                <td>
                     <textarea id="productDescription" name="productDescription" rows="20" cols="60" style="width:450px" class="tinymce">
                        @Html.DisplayFor(model => model.EditingProduct.Description)
                    </textarea>
                </td>
            </tr>
            <tr>
                <td valign="top">
                     @Html.LabelFor(model => model.EditingProduct.Image)
                     (<a href="javascript:;" onclick="openImagePopup();">change...</a>)
                </td>
                <td class="gallery clearfix">
                    @if (Model.EditingImage != null)
                    {                                      
                        <a id="selImageLargeUrl" href="@Url.Action("GetImage", "Image", new { id = Model.EditingImage.ImageId, type = "large", area = "" })" title="@Model.EditingImage.FileName" rel="prettyPhoto[gallery2]">
                            <img id="selImageThumbnailUrl" src="@Url.Action("GetImage", "Image", new { id = Model.EditingImage.ImageId, type = "thumbnail", area = "" })" alt="@Model.EditingImage.FileName" />
                        </a>
                    }
                    else if (!string.IsNullOrEmpty(Model.EditingProduct.Image))
                    {
                        <a id="selImageLargeUrl" href="@Url.Content(string.Format("~/uplImages/{0}", Model.EditingProduct.LargeImage))" title="@Model.EditingProduct.LargeImage" rel="prettyPhoto[gallery2]">
                            <img id="selImageThumbnailUrl" src="@Url.Content(string.Format("~/uplImages/{0}", Model.EditingProduct.Image))" alt="@Model.EditingProduct.Image" />
                        </a>
                    }
                    else
                    {
                        <a id="selImageLargeUrl" rel="prettyPhoto[gallery2]">
                            <img id="selImageThumbnailUrl" />
                        </a> 
                    }
                    
                    @Html.HiddenFor(model => model.EditingProduct.ImageId)
                </td>
            </tr>
            <tr>
                <td valign="top">
                    Categories:
                </td>
                <td>
                    <select id="categories" class="multiselect" multiple="multiple" name="categories[]" size="15" style="width:500px;height:250px">
                     
                        @foreach(var category in Model.Categories)
                        {
                            var selected = Model.SelectedCategories.Find(cat => cat.CategoryId == category.CategoryId) != null ? "selected=\"selected\"" : string.Empty;
                            <option value="@category.CategoryId" @selected>@category.CategoryName</option>
                        }
                      </select>
                </td>
            </tr>
            <tr>
                <td colspan="10">
                    <table>
                        <tr>
                            <td>
                                @Html.LabelFor(model => model.EditingProduct.Special)
                                @Html.EditorFor(model => model.EditingProduct.Special)
                                @Html.ValidationMessageFor(model => model.EditingProduct.Special)
                                &nbsp;&nbsp;
                                @Html.LabelFor(model => model.EditingProduct.Spotlight)
                                @Html.EditorFor(model => model.EditingProduct.Spotlight)
                                @Html.ValidationMessageFor(model => model.EditingProduct.Spotlight)
                                &nbsp;&nbsp;
                                @Html.LabelFor(model => model.EditingProduct.Hide)
                                @Html.EditorFor(model => model.EditingProduct.Hide)
                                @Html.ValidationMessageFor(model => model.EditingProduct.Hide)
                             </td>
                        </tr>
                    </table>
                </td>
            </tr>
           
        </table>
     
        <p>
            <input type="button" name="save" value="save" onclick="submitForm();" />
        </p>
    </fieldset>
    
     <div id="selectImage" title="Select Image to Insert" style="display:none">
        <div id="imageList">
            @Html.Partial("ImageList", Model.Images)
        </div>
    </div>
}

<script language="javascript" type="text/javascript">
    function submitForm() {
        if ($("#productDescription").text().length == 0) {
            showOKDialog("Markup for page description is required");
        }
        else {
            showProgress();
            $("#addEditProductForm").submit();
        }
    }

    $().ready(function () {
        $('textarea.tinymce').tinymce({
            // Location of TinyMCE script
            script_url: '/Scripts/tiny_mce/tiny_mce.js',

            // General options
            theme: "advanced",
            plugins: "autolink,lists,pagebreak,style,layer,table,save,advhr,advimage,advlink,emotions,iespell,inlinepopups,insertdatetime,preview,media,searchreplace,print,contextmenu,paste,directionality,fullscreen,noneditable,visualchars,nonbreaking,xhtmlxtras,template,advlist",

            // Theme options
            theme_advanced_buttons1: "bold,italic,underline,strikethrough,|,justifyleft,justifycenter,justifyright,justifyfull,styleselect,formatselect,fontselect,fontsizeselect",
            theme_advanced_buttons2: "cut,copy,paste,pastetext,pasteword,|,search,replace,|,bullist,numlist,|,outdent,indent,blockquote,|,undo,redo,|,link,unlink,anchor,image,cleanup,help,code,|,insertdate,inserttime,preview",
            theme_advanced_buttons3: "tablecontrols,|,hr,removeformat,visualaid,|,sub,sup,|,charmap,iespell,media,advhr,|,fullscreen,|,styleprops,|,nonbreaking",
            theme_advanced_toolbar_location: "top",
            theme_advanced_toolbar_align: "left",
            theme_advanced_statusbar_location: "bottom",
            theme_advanced_resizing: true,

            // Example content CSS (should be your site CSS)
            content_css: "/Content/Site.css",

            // Drop lists for link/image/media/template dialogs
            template_external_list_url: "lists/template_list.js",
            external_link_list_url: "lists/link_list.js",
            external_image_list_url: "lists/image_list.js",
            media_external_list_url: "lists/media_list.js",

            // Replace values for the template plugin
            template_replace_values: {
                username: "Some User",
                staffid: "991234"
            }
        });

        //setup multiselect
        $.localise('ui-multiselect', { /*language: 'en',*/path: 'Scripts/multiselect/' });
        $(".multiselect").multiselect();
    });


    function openImagePopup() {

        $("#selectImage").dialog({
            autoOpen: true,
            height: 500,
            width: 500,
            modal: true,
            close: function (event, ui) {
               
                $("#EditingProduct_ImageId").val($("#selectedImageId").val());
                $("#selImageLargeUrl").attr("href", $("#selectedImageUrl").val());
                $("#selImageLargeUrl").attr("title", $("#selectedImageFileName").val());
                $("#selImageThumbnailUrl").attr("src", $("#selectedImageThumbnailUrl").val());
                $("#selImageThumbnailUrl").attr("alt", $("#selectedImageFileName").val());
                
                $("#selectedImageId").val("");
                $("#selectedImageTag").val("");
                $("#selectedImageUrl").val("");
                $("#selectedImageThumbnailUrl").val("");
                $("#selectedImageFileName").val("");
            }
        });
    }

</script>
